<template>
  <transition name="slide">
    <div class="detail-wrapper" v-show="show">
      <header-template-phone>
        <template v-slot:left>
          <div @click="handleGoBack" style="display: flex; alignItems: center">
            <span class="icon">
              <i class="iconfont iconstbar_fanhui"></i>
            </span><span>返回</span>
          </div>
        </template>
        <template v-slot:center>
          <div class="center-context" style="">
            订单详情
          </div>
        </template>
        <template v-slot:right>
        
        </template>
      </header-template-phone>
      <div class="main">
        <div class="main-top">
          <order-details-top :item="detail"></order-details-top>
          <bill-board>
            <div class="bill-board-content">
              <div class="content-item">
                <div class="title">购买</div>
                <div class="number">
                  <span class="green"><span>-</span>{{detail.amount}}</span>
                </div>
              </div>
              <div class="content-item">
                <div class="title">中奖</div>
                <div class="number">
                  <span class="red" v-if="detail.lotteryState == 1">+{{detail.bonus}}</span>
                  <span class="normal" v-if="detail.lotteryState == 2">00</span>
                  <span v-if="detail.lotteryState == 0">--</span>
                </div>
              </div>
              <div class="content-item">
                <div class="title">盈亏</div>
                <div class="number">
                  <span v-if="detail.lotteryState == 0">--</span>
                  <span v-else>
                    <span class="red" v-if="detail.lotteryState !== 0 && detail.bonus - detail.amount > 0">+{{detail.bonus - detail.amount}}</span>
                    <span class="green" v-if="detail.lotteryState !== 0 && detail.bonus - detail.amount < 0">{{detail.bonus - detail.amount}}</span>
                    <span class="normal" v-if="detail.lotteryState !== 0 && detail.bonus - detail.amount == 0">-{{detail.bonus - detail.amount}}</span>
                  </span>
                </div>
              </div>
            </div>
          </bill-board>
        </div>
        <div class="spec-wrapper">
          <order-specification>
            <template v-slot:title>
              <div>
                开奖信息
              </div>
            </template>
            <div class="details">
              <order-item title="开奖号码：">
                <span v-if="detail.lotteryState == 0">待开奖</span>
                <span v-else>
                  <component :is="currentComponent" :numStr="detail.winningNumbers">
                  </component>
                </span>
              </order-item>
              <order-item title="开奖时间：">
                <count-down v-if="detail.lotteryState == 0" :timeStamp="detail.drawTime"></count-down>
                <span v-else>
                  {{detail.drawTime | formater}}
                </span>
              </order-item>
            </div>
          </order-specification> 
        </div>
        <div class="spec-wrapper">
          <order-specification>
            <template v-slot:title>
              <div>
                订单方案
              </div>
            </template>
            <div class="details">
              <order-item title="购买时间：" :width="80">
                <span>{{detail.orderTime | formater}}</span>
              </order-item>
              <order-item title="订单单号：" :width="80">
                <span>
                  {{detail.orderId}}
                </span>
              </order-item>
              <order-item title="彩种玩法：" :width="80">
                <span>
                  {{detail.lotteryType}}
                </span>
              </order-item>
              <order-item title="返点：" :width="80">
                <span>
                  {{detail.refundRate}}
                </span>
              </order-item>
              <order-item title="注数：" :width="80">
                <span>
                  {{detail.quantity}}
                </span>
              </order-item>
              <order-item title="单注金额：" :width="80">
                <span class="green">
                  {{detail.amount / detail.quantity}}
                </span>
              </order-item>
              <order-item title="最高奖金：" :width="80">
                <span class="red">
                  {{detail.bonus}}
                </span>
              </order-item>
              <order-item title="购买内容：" :width="80">
                <span class="red">@</span>
                <span>
                  {{detail.numbers}}
                </span>
              </order-item>
            </div>
          </order-specification> 
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import OrderDetailsTop from './components/order-details-top'
import BillBoard from '@/components/base/bill-board/bill-board'
import OrderSpecification from '@/components/base/order-specification/order-specification'
import OrderItem from '@/components/base/order-specification/order-item'
import CountDown from '@/components/base/count-down/count-down'
import WinningNumbersScPhone from '@/components/base/winning-numbers/winning-numbers-sc-phone'
import WinningNumbersSscPhone from '@/components/base/winning-numbers/winning-numbers-ssc-phone'
import { mapGetters } from 'vuex';
export default {
  components: {
    HeaderTemplatePhone,
    OrderDetailsTop,
    BillBoard,
    OrderSpecification,
    OrderItem,
    CountDown,
    WinningNumbersScPhone,
    WinningNumbersSscPhone
  },
  props:  {
    detail: {
      type: Object, 
      default: function() {
        return {}
      }
    },
    show: {
      type: Boolean,
      default: false 
    }
  },
  created() {
    console.log(this.detail)
  },
  methods: {
    handleGoBack() {
      this.$emit('click')
    }
  },
  computed: {
    ...mapGetters(['getIsPhone']),
    currentComponent() {
      let component = ''
      switch(this.detail.lotteryName) {
        case '北京赛车':
          component = 'WinningNumbersScPhone'
          break;
        case '重庆时时彩':
          component = 'WinningNumbersSscPhone'
          break;
      }
      return component 
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
.detail-wrapper 
  position fixed 
  left 0 
  right 0
  top 0
  bottom 0 
  z-index 100000
  width 100%
  background linear-gradient(180deg, #e5e5e5, #fefbfb)
  &.slide-enter, &.slide-leave-to 
    transform translate3d(100%, 0, 0)
  &.slide-enter-active, &.slide-leave-active 
    transition all 0.3s
  .main
    box-sizing border-box 
    padding-top 48px
    .main-top 
      background $color-text-button
    .spec-wrapper 
      box-sizing border-box 
      padding 10px
      .details 
        padding 10px 0
        .title 
          color $color-sub-grey
        .green 
          color $color-primary-green 
        .red 
          color $color-theme-red 
  .main >>> .bg-bar  
    display none
  .main >>> .bill-board  
    border none !important 
    box-shadow none !important
    .content 
      border-radius 0 
      border none
      margin-bottom 0
  .bill-board-content 
    display flex 
    align-items center
    justify-content space-around
    height 60px
    .content-item 
      .title 
        color $color-sub-grey 
        margin-bottom 10px
      .number 
        .red 
          color $color-theme-red 
        .green 
          color $color-primary-green
</style>